<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>员工列表</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body a {
      text-decoration: none;
      color: #0d3a4b;
    }

    .active {
      color: #ffffff;
    }

    .wrap {
      width: 700px;
      height: 500px;
      background-color: skyblue;
      margin: 0 auto;
      position: relative;
    }

    .wrap #table {
      width: 460px;
      border-radius: 12px;
      position: absolute;
      left: 50%;
      top: 160px;
      transform: translateX(-50%);
      box-sizing: border-box;
      overflow: hidden;
    }

    .wrap #table thead {
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
      color: #fff;
      background: #4cbfe5;
    }

    .wrap #table thead a {
      color: #fff;
    }

    .wrap #table tbody {
      color: #19c2ff;
    }

    .wrap #table tbody a {
      color: #19c2ff;
    }

    .wrap #table tbody tr {
      background: #fff;
    }

    .ctrl {
      position: absolute;
      left: 200px;
      top: 100px;
    }

    .ctrl div {
      width: 300px;
      line-height: 30px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
    }

    h1 {
      text-align: center;
      padding-top: 20px;
      color: white;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <h1>员工列表</h1>
    <div class="ctrl">
      <div class="age_sort nu">
        <a href="javascript:;">年龄从小到大</a>
        <a href="javascript:;">年龄从大到小</a>
        <a href="javascript:;" class="active">默认排序</a>
      </div>
      <div class="gender_show">
        <a href="javascript:;">只显示男性</a>
        <a href="javascript:;">只显示女性</a>
        <a href="javascript:;" class="active">默认</a>
      </div>
    </div>
    <table id="table">
      <thead>
        <tr>
          <th>id</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>0</th>
          <th>小明</th>
          <th>24</th>
          <th>男</th>
        </tr>
      </tbody>
    </table>
  </div>
  <script>
    var data = [
      {
        id: 1,
        name: '小明',
        age: 24,
        gender: '男'
      },
      {
        id: 2,
        name: '小芳',
        age: 30,
        gender: '女'
      },
      {
        id: 3,
        name: '小美',
        age: 31,
        gender: '女'
      },
      {
        id: 4,
        name: '小刚',
        age: 21,
        gender: '男'
      },
      {
        id: 5,
        name: '小琪',
        age: 18,
        gender: '女'
      }
    ];

    // 1. 渲染数据  数据驱动视图
    // 封装一个函数 渲染数据到页面上
    function renderDom (data) {
      // 1.1 清空tbody
      var tbodyEl = document.querySelector('tbody')
      tbodyEl.innerHTML = ''

      // 1.2 根据数据 动态生成tr标签
      data.forEach(item => {
        var trEl = document.createElement('tr')
        trEl.innerHTML = `
        <td>${item.id} </td>
        <td>${item.name} </td>
        <td>${item.age} </td>
        <td>${item.gender} </td>
        `
        tbodyEl.appendChild(trEl)
      });
    }

    // 1.3 调用动态生成函数
    renderDom(data)

    // 2. 点击年龄排序
    var ageAs = document.querySelectorAll('.age_sort a')
    // 2.1 新的思路 把所有的排序方法 放在一个数组里
    var sortArr = [
      data => {
        // 2.2 这里先把原数据转JSON 在转回原数据 是为了深拷贝  不改变原数组 实现默认排序 
        var res = JSON.parse(JSON.stringify(data))
        //2.3 正序
        res.sort((a, b) => {
          return a.age - b.age
        })
        return res
      },
      data => {
        var res = JSON.parse(JSON.stringify(data))
        //2.4 倒序
        res.sort((a, b) => {
          return b.age - a.age
        })
        return res
      },
      // 2.5 默认排序 还是原数组
      data => { return data }
    ]
    // 年龄筛选
    ageAs.forEach((item, key) => {
      item.onclick = function () {
        // 排他思想
        ageAs.forEach(itm => {
          itm.classList.remove('active')
        })
        item.classList.add('active')

        ageInd = key// 把当前的点击索引 key 赋值给 全局变量年龄的索引


        // 2.6 点击哪个a 执行哪个排序
        var res = sortArr[key](data)

        var newres = filterArr[genderInd](res)

        // 2.7 重现渲染页面
        renderDom(newres)
      }
    })

    // 记录年龄的按钮位置索引
    let ageInd = 1
    // 记录性别的按钮位置索引
    let genderInd = 1

    // 3. 筛选性别
    var genderAs = document.querySelectorAll('.gender_show a')
    // 3.1 把筛选方法放到一个数组
    var filterArr = [
      data => {
        // 3.2 筛选男性方法
        var data = data.filter(function (data) {
          return data.gender === '男'
        })
        return data
      },
      data => {
        // 3.2 筛选女性方法
        var data = data.filter(function (data) {
          return data.gender === '女'
        })
        return data
      },
      data => { return data }
    ]
    genderAs.forEach((item, key) => {
      item.onclick = function () {
        genderAs.forEach(itm => {
          itm.classList.remove('active') //classList 不影响其他的类名
        })
        item.classList.add('active')

        genderInd = key // 把当前的点击索引 key 赋值给 全局变量性别的索引


        var res = filterArr[key](data)
        var newres = sortArr[ageInd](res) // 性别基础上 做年龄筛选
        renderDom(newres)

      }
    })

  </script>
</body>

</html>